<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                   <el-button type="success" plain @click="createTable" :disabled="isClick">点击生成图表</el-button>
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="schart-box">
                <schart class="schart" canvasId="bar" :options="options1"></schart>
            </div>
           
            <div class="schart-box">
                <schart class="schart" canvasId="pie" :options="options3"></schart>
            </div>

        </div>
    </div>
</template>

<script>
import Schart from 'vue-schart';
import request from '@/utils/request';
export default {
    name: 'basecharts',
    components: {
        Schart
    },
    data() {
        return {
            isClick:false,
            options1: {
                xRorate:30,
                type: 'bar',
                title: {
                    text: '商品分类图'
                },
                bgColor: '#fbfbfb',
                labels: [],
                datasets: [
                    {
                        label: '商品种类数',
                        fillColor: 'rgba(241, 49, 74, 0.5)',
                        data: []
                    },
                ],
            },
            options3: {
                type: 'pie',
                title: {
                    text: '商品分类图'
                },
                legend: {
                    position: 'left'
                },
                bgColor: '#fbfbfb',
                labels: [],
                datasets: [
                    {
                        data: []
                    }
                ]
            },
        };
    },
    methods:{
        getData(){
            request.get("http://localhost:8081/category/categoryTable",{
               params:this.query
        }).then(res=>{
            res.data.forEach(item => {
                this.options1.labels.push(item.name)
                this.options3.labels.push(item.name)
                this.options1.datasets[0].data.push(item.data)
                this.options3.datasets[0].data.push(item.data)
            });

        })
        },
        createTable(){
            this.getData()
            this.isClick = true
        },
    }
};
</script>

<style scoped>
.schart-box {
    display: inline-block;
    margin: 20px;
}
.schart {
    width: 600px;
    height: 400px;
}
.content-title {
    clear: both;
    font-weight: 400;
    line-height: 50px;
    margin: 10px 0;
    font-size: 22px;
    color: #1f2f3d;
}
</style>